


<!-- 组件的文件命名，一般都是大写的。Content.vue -->
<!-- 组件是带有名称的可复用的实例,单独功能模块的封装 -->

<!-- 为什么data是必须是一个函数,并且返回一个对象? -->
<!-- 每一次都会重新调用,避免数据污染 -->
<template>
    <div>
        <h2>我是content组件内容</h2>
        <p>{{msg}}</p>
        <button @click="msg='你好'">改变msg的按钮</button>
        <!-- P31:父组件Content向子组件Helloworld传递数据,父组件直接在组件上写传递的值,子组件通过props接受 -->
        <HelloWorld :message="msg2" :list="list"></HelloWorld>
        <p>------------</p>
        <button @click="sendParent">提交数据给父组件</button>
    </div>
</template>

<script>
// 如果写成这样一改全改,因为共用一份数据.
const obj = {
    msg: "content组件内容: msg"
}
// 引入不要忘记写./
import HelloWorld from './父子组件的通信-props&emit自定义事件-HelloWorld.vue'
export default {
    data(){// data函数返回对象,可以让每一个组件对象都返回一个新的对象,不会造成数据污染
        return{
            msg: "content组件内容: msg",
            msg2: "从Content.vue传递props给HelloWorld.vue",
            msg3: "msg33333",
            list: [1,2,3,4]
        }
        // return obj;
    },
    components:{
        HelloWorld
    },
    methods:{
        // P33:子传父,想要在APP.vue父组件获取子组件Content.vue的数据msg,通过自定义事件 -->
        // 1.在子组件中,通过$emit来触发事件
        sendParent:function(){
            // this.$emit('自定义事件的名称','发送的事件参数')
            // 因为按钮会触发sendParent函数,函数又会触发injectMsg自定义事件.
            // 事件的概念:click这种
            this.$emit('injectMsg',this.msg3)
        }
    }
}
</script>